<!DOCTYPE html>
<html>
<head>
    <title>优化后的页面</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/index.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
</head>
<body>
    <header>
        <div class="top">
            <img src="./img/logo.png" alt="logo">
            <button>
                <i class="fa-solid fa-house"></i> 首页
            </button>
            <button>
                <i class="fa-solid fa-wrench"></i> 服务
            </button>
            <button>
                <i class="fa-solid fa-file"></i> 文档
            </button>
            <button>
                <i class="fa-solid fa-info"></i> 关于
            </button>
            <form action="">
                <input type="text">
                <input type="submit" value="搜索">
            </form>
        </div>
    </header>
    <main>
        <div class="banner">
            <p>
                绿水青山就是金山银山<br/>矢量空镜始终致力于计算机技术与可持续发展的结合
            </p>
        </div>
        <div class="message">
            <div class="imgs">
                <button class="prev"><i class="fa-solid fa-chevron-left"></i></button>
                <button class="next"><i class="fa-solid fa-chevron-right"></i></button>
                <ul>
                    <li>
                        <img src="./img/imgs-1.png" alt="轮播图1">
                    </li>
                    <li>
                        <img src="./img/imgs-2.png" alt="轮播图2">
                    </li>
                    <li>
                        <img src="./img/imgs-3.png" alt="轮播图3">
                    </li>
                    <li>
                        <img src="./img/imgs-4.png" alt="轮播图4">
                    </li>
                    <li>
                        <img src="./img/imgs-5.png" alt="轮播图5">
                    </li>
                </ul>
            </div>
            <div class="list-message">
                <h2>
                    最近文章
                </h2>
                <ul>
                    <li><span>开辟崭新的可持续发展之路的科学指引</span><span class="icon">→</span></li>
                    <li><span>落实2030年可持续发展议程进展报告2025</span><span class="icon">→</span></li>
                    <li><span>地球大数据支撑可持续发展目标报告（2025）</span><span class="icon">→</span></li>
                    <li><span>变革我们的世界：2030年可持续发展议程</span><span class="icon">→</span></li>
                    <li><span>我们共同的未来</span><span class="icon">→</span></li>
                </ul>

            </div>
            
        </div>
        <div class="container">
            <h2>选择您的服务方案</h2>
            
            <div class="sustainability-intro">
                <h3>计算机技术与可持续发展的完美结合</h3>
                <p>在当今数字化时代，计算机技术已成为推动可持续发展的重要力量。我们致力于将先进的计算技术与环境保护、资源节约、社会公平等可持续发展目标相结合，为客户提供创新的解决方案。</p>
                <p>通过大数据分析、人工智能、物联网等技术，我们可以帮助企业和组织更有效地监测环境变化、优化资源利用、减少碳排放，同时提高运营效率和社会影响力。</p>
                <p>选择我们的服务，您不仅获得了一套现代化的管理平台，更成为了可持续发展理念的践行者，共同为构建更美好的未来贡献力量。</p>
            </div>
            
            <div class="sald">
                <img src="./img/img-sald.png" alt="服务方案展示图">
                <form action="">
                    <h3>现代化的高效率管理平台</h3>
                    
                    <div class="form-group">
                        <label for="service-type">服务类型</label>
                        <select id="service-type" required>
                            <option value="">请选择服务类型</option>
                            <option value="ui">仅UI界面</option>
                            <option value="fullstack">全栈界面</option>
                            <option value="complete">前后台一站式搭建</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="ui-style">UI风格</label>
                        <select id="ui-style" required>
                            <option value="">请选择UI风格</option>
                            <option value="modern">现代化扁平风UI</option>
                            <option value="simple">简洁UI</option>
                            <option value="web">web端UI</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label>技术栈选择</label>
                        <div class="button-group">
                            <button type="button" class="tech-btn" data-tech="csharp">C#</button>
                            <button type="button" class="tech-btn" data-tech="web">Web</button>
                            <button type="button" class="tech-btn" data-tech="qt">Qt</button>
                        </div>
                    </div>

                    <div class="price">18888元</div>
                    
                    <input type="submit" value="立即购买">
                </form>
            </div>
        </div>

        <div class="memeber">
            <div class="member-card">
                <img src="./img/tx.jpg" alt="个人头像">
                <h3>廖文津</h3>
                <p>矢量空镜创始人</p>
                <p>就读于河南大学软件学院软件工程系</p>
                <p>专注于可持续发展与计算机技术的结合</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-github"></i></a>
                    <a href="#"><i class="fab fa-linkedin"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                </div>
            </div>
        </div>
        <div class="works">
            <div class="project-card">
                <img src="./img/works-1.jpg" alt="项目1">
                <div class="project-card-content">
                    <h3>可持续发展数据分析平台</h3>
                    <p>基于大数据分析的可持续发展目标监测系统</p>
                </div>
            </div>
            <div class="project-card">
                <img src="./img/works-2.png" alt="项目2">
                <div class="project-card-content">
                    <h3>环境监测系统</h3>
                    <p>实时环境数据采集与分析平台</p>
                </div>
            </div>
            <div class="project-card">
                <img src="./img/works-3.jpg" alt="项目3">
                <div class="project-card-content">
                    <h3>智能决策支持系统</h3>
                    <p>基于AI的可持续发展决策辅助工具</p>
                </div>
            </div>
        </div>
    </main>
    <footer>
        <div class="footer-content">
            <div class="footer-info">
                <p>公司法定负责人：廖文津</p>
                <p>地址：开封市顺河回族自治区河南大学明伦校区</p>
                <p>电话：13314653421</p>
                <p>邮箱：2098142568@qq.com</p>
                <p>学号：2410250456</p>
                <p>工作组：软工7班</p>
            </div>
            <div class="footer-links">
                <a href="#">关于我们</a>
                <a href="#">服务条款</a>
                <a href="#">隐私政策</a>
                <a href="#">联系我们</a>
            </div>
            <div class="footer-copyright">
                <p>&copy; 2025 矢量空镜 版权所有</p>
                <p>致力于计算机技术与可持续发展的结合，为构建更美好的未来贡献力量</p>
            </div>
        </div>
    </footer>
    <script src="./js/index.js"></script>
</body>
</html>
    